/**
 * Created by xukj on 2018/5/31.
 */

import React from 'react';
import {
  View,
  Text,
  Image,
  ScrollView,
  Dimensions,
  StyleSheet,
} from 'react-native';
import { Colors } from '../constants/Constants';
import Button from '../components/Button';
import CustomFlatList01 from '../components/CustomFlatList01';
import CustomCellItem01 from '../components/CustomCellItem01';

export default class ProfilePage extends React.Component {
  static navigationOptions = {
    headerTitle: '个人',
    tabBarLabel: '个人',
  };

  constructor(props) {
    super(props);
    this.state = {
      followData: [
        {key: '01', title: '第1条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '02', title: '第2条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '03', title: '第3条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '04', title: '第4条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '05', title: '第5条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '06', title: '第6条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '07', title: '第7条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '08', title: '第8条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '09', title: '第9条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '10', title: '第10条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '11', title: '第11条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '12', title: '第12条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '13', title: '第13条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '14', title: '第14条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '15', title: '第15条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '16', title: '第16条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '17', title: '第17条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '18', title: '第18条记录', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
      ],
      historyData: [
        {key: '01', title: '第1条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '02', title: '第2条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '03', title: '第3条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '04', title: '第4条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '05', title: '第5条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '06', title: '第6条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '07', title: '第7条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '08', title: '第8条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '09', title: '第9条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '10', title: '第10条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '11', title: '第11条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '12', title: '第12条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '13', title: '第13条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '14', title: '第14条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '15', title: '第15条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '16', title: '第16条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '17', title: '第17条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
        {key: '18', title: '第18条历史', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'},
      ],
      showIndex: 0,
    }
  }

  render() {
    console.log('render');
    return (
      <View style={{flexDirection:'column', flex: 1, justifyContent: 'flex-start', alignItems: 'stretch'}}>
        {this._renderUser()}
        {this._renderSwitch()}
        {this._renderList()}
      </View>
    );
  }

  _renderUser = () => {
    return (
      <View style={{backgroundColor: 'white', alignItems: 'center', height: 156}}>
        <Image
          source={{uri: 'https://mmbiz.qpic.cn/mmbiz_jpg/XsbE0uWu3l5Gh5ib0zox5LZdsekOLrPl3EZqib4rF26NeumicxB97wS2LUE0NyRGM5CHFJBXiamZJ8M2ib9vntcsEvQ/0?wx_fmt=jpeg'}}
          style={styles.header}
        />
        <Button
          text="点击登录"
          style={styles.login}
          onPress={this._onLoginPress}
        />
      </View>
    );
  };

  _renderSwitch = () => {
    return (
      <View style={{flexDirection: 'row', height: 40, alignItems: 'stretch', backgroundColor: Colors.lightblue01}}>
        <Button
          text="关注"
          containerStyle={this.state.showIndex === 0 ? styles.select : styles.unSelect}
          style={styles.text}
          onPress={this._onFollowPress}
        />
        <Button
          text="历史"
          containerStyle={this.state.showIndex === 1 ? styles.select : styles.unSelect}
          style={styles.text}
          onPress={this._onHistoryPress}
        />
      </View>
    );
  };

  _renderList = () => {
    return (
      <ScrollView
        ref={(scrollView) => {this._scrollView = scrollView; }}
        horizontal={true}
        pagingEnabled={true}
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={this._onScrollEnd}
      >
        <CustomFlatList01
          data={this.state.followData}
          renderItem={this._renderFollowItem}
        />
        <CustomFlatList01
          data={this.state.historyData}
          renderItem={this._renderHistoryItem}
        />
      </ScrollView>
    );
  };

  _renderFollowItem = ({item}) => (
    <CustomCellItem01 data={item} onPress={this._onFollowDataPress} />
  );

  _renderHistoryItem = ({item}) => (
    <CustomCellItem01 data={item} onPress={this._onHistoryDataPress} />
  );

  _onLoginPress = () => {
    this.props.navigation.navigate('Login');
  };

  _onFollowPress = () => {
    this._scrollView.scrollTo({x: 0});
  };

  _onHistoryPress = () => {
    this._scrollView.scrollTo({x: width});
  };

  _onFollowDataPress = (item) => {
    this.props.navigation.navigate('Detail', {item: item});
  };

  _onHistoryDataPress = (item) => {
    this.props.navigation.navigate('Detail', {item: item});
  };

  _onScrollEnd = ({nativeEvent}) => {
    console.log(nativeEvent.contentOffset);
    this.setState({
      showIndex: nativeEvent.contentOffset.x > 0 ? 1 : 0,
    });
  };
}

const {width} = Dimensions.get('window');

const styles = StyleSheet.create({
  header: {
    width: 80,
    height: 80,
    borderRadius: 40,
    marginTop: 28,
  },
  login: {
    fontSize: 14,
    marginTop: 10,
    height: 20,
    color: Colors.blue01,
  },
  text: {
    fontSize: 14,
    textAlign: 'center',
    color: 'white',
  },
  select: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.red01,
  },
  unSelect: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  }
});